import React, { PureComponent } from 'react'
import '../../common/common.css'

export default class ChangeOptimizePureComponent extends PureComponent {

    state = { carName: "奔驰c36", stus: ['小张', '小李', '小王'] }

    addStu = () => {
        const { stus } = this.state
        this.setState({ stus: ['小刘', ...stus] })
    }

    changeCar = () => {
        // 下面语句等同于这句
        this.setState({carName:'迈巴赫'})
    }

    render() {
        console.log('Parent---render');
        const { carName,stus } = this.state
        return (
            <div className="parent">
                <div>
                    <button className='returnButton'><a href="/">点击返回主菜单</a></button>
                    <h1>Component的2个问题</h1>
                    <p>{`1. 只要执行setState(),即使不改变状态数据, 组件也会重新render() ==> 效率低`}</p>
                    <p>{"2. 只当前组件重新render(), 就会自动重新render子组件，纵使子组件没有用到父组件的任何数据 ==> 效率低"}</p>
                    <h1>解决办法</h1>
                    <p>
                        办法1: <br />
                        重写shouldComponentUpdate()方法 <br />
                        比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false <br />
                        办法2: <br />
                        使用PureComponent <br />
                        PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true <br />
                        注意: <br />
                        只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false 
                        不要直接修改state数据, 而是要产生新数据.<br />
                        项目中一般使用PureComponent来优化
                    </p>
                    <h1>组件解读：</h1>
                    <p>
                        进入页面的时候，父子组件都会进行渲染。第一次点击按钮——点我换车 父子组件都会触发
                        render,后续点击时,因为内容没有发生修改所以不会再触发render。点击按钮——添加一个小刘 时，
                        只会触发父组件的render。本来在 shouldComponentUpdate 生命周期中写很多
                        !this.state.carName === nextState.carName
                        这样的语句来监视数据的改变。这里用 PureComponent 代替可以检测很多个状态的变化情况。
                    </p>
                </div>
                <h3>我是Parent组件</h3>
                <span>有几个人：{stus}</span><br />
                <span>我的车名字是：{carName}</span><br />
                <button onClick={this.changeCar}>点我换车</button>
                <button onClick={this.addStu}>添加一个小刘</button>
                <Child carName={carName} />
            </div>
        )
    }
}

class Child extends PureComponent {
    render() {
        console.log('Child---render');
        return (
            <div className="child">
                <h3>我是Child组件</h3>
                <span>我接到的车是：{this.props.carName}</span>
            </div>
        )
    }
}
